<template>
	<view>
		<view style="background-color: #fff;">
			<u-tabs name="name" :list="list" :is-scroll="false" :current="visitStatus" @change="change"></u-tabs>
			<u-badge type="error" v-if="visitStatus == 0" :count="total" :offset="[20, 464]" :absolute="true"></u-badge>
		</view>
		
		<view>
			<view class="a" v-for="(item,index) in cardList" :key="index">
				<view class="owner">{{item.visitorName}}</view>
				<view>手机号码：{{item.visitorTel}}</view>
				<view>业主地址：{{item.roomInfo}}</view>
				<view class="time">到访时间：{{item.visitorStartTime}}</view>
				<u-tag style="width: 120rpx;text-align: center;"
					:text="$dictTools.dictTypeData('VISITOR_AIM',item.visitorAim)" size="mini"
					:type="$dictTools.fileTag('VISITOR_AIM',item.visitorAim)"></u-tag>
				<view class="po-but">
					<u-button size=mini @click="submit(index)">删除</u-button>
				</view>
			</view>
		</view>
		
		<view class="po-edit">
			<u-icon name="tags-fill" color="#fff" size="28" @click="openAppointment"></u-icon>
		</view>
	</view>
</template>

<script>
	import {
		visitorManagePage,visitorManageDelete
	} from '@/api/wit/visitorManageApi.js'
	
	import { mapGetters } from 'vuex';
	
	export default {
		data() {
			return {
				customStyle: {
					textAlign: 'center',
					padding: '0 20rpx',
					height: '50rpx',
					color: '#d6a241'
				},
				list: [{
					name: '待到访'
				}, {
					name: '已到访'
				}],
				visitStatus: 0,
				cardList: [],
				parameter:{
					current: 1,
					size: 10
				},
				allDataLoaded: false,
				total: 0
			}
		},
		mounted() {
		    this.loadData()
		  },
		computed: {
		    ...mapGetters(['user_info']),
		  },
		methods: {
			async change(index) {
			  this.visitStatus = index;
			  this.parameter.current = 1;  // 重置current为1
			  this.cardList = []; // 清空cardList
			  await this.loadData();
			},
			openAppointment(){
				uni.navigateTo({
					url:'/subPack/appointment'
				})
			},
			async loadData() {
			     try {
					const proprietorId = this.user_info.id;
					const parmas = {...this.parameter};
					
					const response = await visitorManagePage({...parmas,proprietorId:proprietorId,visitStatus:this.visitStatus === 0 ? '1' : '2'})
					this.total = response.total; 
				   if (response.records.length > 0) { // 如果有数据
			                 this.cardList = this.cardList.concat(response.records);
			                 this.parameter.current++
			               } else {
			                 this.allDataLoaded = true;  // 数据已经全部加载完
			            }
			     } catch (error) {
			       console.error('error', error)
			     }
			},
			submit(index) {
			    uni.showModal({
			      title: '提示',
			      content: '确定要删除吗？',
			      success: (res) => {
			        if (res.confirm) {
			          visitorManageDelete([{ id: this.cardList[index].id }])
			            .then(res => {
							this.parameter.current = 1;
							this.cardList = [];
							this.loadData();
			            });
			        }
			      }
			    })
			},
			onReachBottom() {
				if (!this.allDataLoaded) {  // 如果数据还没有全部加载完才继续加载
				    this.loadData()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	$color-241: #d6a241;

	.po-edit {
		position: fixed;
		right: 5%;
		bottom: 20%;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #518ded;
		line-height: 80rpx;
		text-align: center;
	}

	/deep/.u-card {
		background-color: #d6a24160 !important;
		color: $color-241;

		.u-card__head {
			padding: 20rpx !important;
			border-bottom: 1px solid #d6a24130;
		}

		.u-card__body {
			padding: 50rpx 30rpx !important;
		}

		.u-btn {
			background-color: transparent;
		}
	}

	.head-slot {
		display: flex;
		justify-content: space-between;
	}

	.body-slot {
		display: flex;

		>view {
			flex: 1;
			text-align: center;
			display: flex;
			flex-direction: column;
			color: $color-241;

			.b-num {
				font-weight: 700;
			}
		}

		>view:nth-child(1) {
			border-right: 2px solid $color-241;
		}
	}
	
		/deep/.a{
				border-radius: 8px;
			    padding: 25px 25px 0 25px;
			    box-shadow: none;
			    background: #e5e5e547;
			    margin: 10px 10px 0 10px;
				color: #353535b0;
				.owner{
					color: #000;
					font-weight: 700;
				}
				view{
					margin-bottom: 10px;
				}
			}
			/deep/.po-but{
				float: right;
				margin-top: -6px; 
				margin-bottom: 0px !important;
			}
</style>